import React, { useEffect, useRef, useState } from "react";
import axios from "axios";
import { useHistory } from "react-router-dom/cjs/react-router-dom";
// import { withRouter } from "react-router-dom/cjs/react-router-dom.min";
import { Image, List, InfiniteScroll } from "antd-mobile";
export default function Nowplaying(props) {
  const [hasMore, sethasMore] = useState(true);
  const [list, setlist] = useState([]);
  const count = useRef(0);
  // useEffect(() => {
  //   axios({
  //     url: "https://m.maizuo.com/gateway?cityId=510100&pageNum=1&pageSize=10&type=1&k=5181921",
  //     headers: {
  //       "X-Client-Info":
  //         '{"a":"3000","ch":"1002","v":"5.2.1","e":"16580266551103961213894657","bc":"510100"}',
  //       "X-Host": "mall.film-ticket.film.list",
  //     },
  //   }).then((res) => {
  //     console.log("dawdwad", res);
  //     setlist(res.data.data.films);
  //   });
  // }, []);

  // 利用usehistory跳转
  const history = useHistory();
  const handleChangePage = (id) => {
    // console.log("点击行", id);
    // window.location.href = "#/detail/" + id;
    console.log(props);
    // props.history.push(`/detail/${id}`);
    // this.props.history.push(`/detail/${id}`);
    history.push(`/detail/${id}`);
    // 三种效果一样
    // 2-query传参
    // history.push({pathname:'detail',query:{myid:id}});
    // 3-state传参  复制地址后跳转是有问题的 因为状态是缓存后传过来的
    // history.push({ pathname: "detail", state: { myid: id } });
  };
  const loadMore = () => {
    console.log("到底了第一次加载一定会触发 useEffect可以不用了 ");
    count.current++;

    sethasMore(false);
    axios({
      url: `https://m.maizuo.com/gateway?cityId=110100&pageNum=${count.current}&pageSize=10&type=1&k=1886067`,
      headers: {
        "X-Client-Info":
          '{"a":"3000","ch":"1002","v":"5.2.0","e":"16395416565231270166529","bc":"110100"}',
        "X-Host": "mall.film-ticket.film.list",
      },
    }).then((res) => {
      // console.log(res.data.data.films)
      setlist([...list, ...res.data.data.films]);

      sethasMore(res.data.data.films.length > 0);
    });
  };

  return (
    <div>
      <List>
        {list.map((user) => (
          <List.Item
            onClick={() => handleChangePage(user.filmId)}
            key={user.filmId}
            prefix={<Image src={user.poster} fit="cover" width={80} />}
            description={
              <div>
                {user.grade ? (
                  <div>观众评分：{user.grade}</div>
                ) : (
                  <div style={{ visibility: "hidden" }}>
                    观众评分：{user.grade}
                  </div>
                )}

                <div>
                  主演:{user.actors[0].name} ||{" "}
                  {user.actors[1] ? user.actors[1].name : ""} ||{" "}
                  {user.actors[2] ? user.actors[2].name : ""}
                  {user.actors[3] ? " || " + user.actors[3].name : ""}
                </div>
                <div>
                  {user.nation}|{user.runtime}分钟
                </div>
              </div>
            }
          >
            {user.name}
          </List.Item>
        ))}
      </List>
      <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
    </div>
  );
}
